// 一区两中心
import { defineComponent } from 'vue';
import { WrapTitle } from '@common/index';
import { ToThousandsTOOL } from '@/utils';
import { DistrictCentersMap } from '@config/map';

export default defineComponent({
  name: 'DistrictCenters',
  props: {
    data: Array,
  },
  render(props) {
    return (
      <>
        <WrapTitle title="一区两中心"></WrapTitle>
        <ul id="DistrictCenters">
          {DistrictCentersMap.map((item) => {
            const cnt = props.data?.find?.((c) => c.name === item.key)?.value;

            return (
              <li>
                <img src={require(`@assets/${item.icon}`)} />

                <header>{item.label}</header>
                <p>
                  {cnt ? ToThousandsTOOL(cnt) : '-'}
                  <span>件</span>
                </p>
              </li>
            );
          })}
        </ul>
      </>
    );
  },
});
